<template>
  <div class="categories">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <el-button type="primary" plain @click='handleAddCate'>添加分类</el-button>

    <!-- 1.3使用组件 - 可自定义标签名 -->
    <tree-table class="mt-15" :treeStructure="true" :columns="columns" :data-source="dataSource" @deleteCate="deleteCategory" @editCate="editCategory">
    </tree-table>

    <!-- 分页 -->
    <el-pagination class="page mt-15" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totalNum">
    </el-pagination>

    <!-- 添加分类对话框 -->
    <el-dialog title="添加分类" :visible.sync="addDialogFormVisible">
      <!-- js表单验证要先给form表单添加ref属性 -->
      <el-form :model="addForm" ref='addFormRef' :rules='myrules'>
        <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cat_name">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级名称" :label-width="formLabelWidth">
          <!-- options属性表示级联选择器的数据 props指定展示的字段-->
          <!-- change-on-select属性控制可以选择任意一级 -->
          <!-- selectedOptions 属性中保存的是选中节点的id数组 -->
          <el-cascader :options="cateList" :props='defaultProps' change-on-select v-model="selectedOptions" @change="handleChange">
          </el-cascader>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible  = false">取 消</el-button>
        <el-button type="primary" @click="submitadd('addFormRef')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { getCategories, addCate } from '@/api'
// 1.1 引入组件
import TreeTable from '@/components/TreeGrid/TreeGrid'
export default {
  // 1.2 注入组件
  components: {
    TreeTable
  },
  data () {
    return {
      addDialogFormVisible: false,
      // 1.4 导入组件相关数据方法
      dataSource: [],
      columns: [
        {
          text: '分类名称',
          dataIndex: 'cat_name',
          width: ''
        },
        {
          text: '是否有效',
          dataIndex: 'cat_deleted',
          width: ''
        },
        {
          text: '排序',
          dataIndex: 'cat_level',
          width: ''
        }
      ],
      totalNum: 0, // 用户总条数
      pagesize: 10, // 每页显示多少条，默认为10条
      pagenum: 1, // 当前页码，默认为第1页
      formLabelWidth: '80px',
      // 需要传递的参数
      addForm: {
        cat_name: '',
        cat_pid: '',
        cat_level: ''
      },
      cateList: [],
      selectedOptions: [],
      // defaultProps指定展示的字段
      defaultProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      // js校验规则
      myrules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.initTable()
  },
  methods: {
    initTable () {
      // 返回数据不符合需求，根据分页猜测需要再传两个参数pagenum和pagesize（是文档写错）
      getCategories(3, this.pagenum, this.pagesize).then(res => {
        this.dataSource = res.data.result
        this.totalNum = res.data.total
      })
    },
    deleteCategory (cid) {
      console.log(cid)
    },
    editCategory (cid) {
      console.log(cid)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      // 2.3 改变每页多少条的时候，将这个值赋值给pagesize属性，再调用获取数据的方法
      this.pagesize = val
      this.initTable()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      // 2.4 改变当前页码时，将当前页码的值赋值给pagenum属性，接着再调用获取数据的方法
      this.pagenum = val
      this.initTable()
    },
    // 点击添加分类处理函数
    handleAddCate () {
      this.addDialogFormVisible = true
      // 注意参数传递只传一个
      getCategories(2).then(res => {
        console.log(res)
        this.cateList = res.data
      })
    },
    // 级联选择器改变触发的函数
    handleChange (value) {
      // value参数和selectedOptions作用一样，保存的是选中之后的节点id数据
      console.log(value)
      if (value.length === 1) {
        this.addForm.cat_pid = value[value.length - 1]
        this.addForm.cat_level = 1
      } else {
        this.addForm.cat_pid = value[value.length - 1]
        this.addForm.cat_level = 2
      }
      // 2.3 拼接传递参数
      // this.addForm.cat_pid = value[value.length - 1];
      // this.addForm.cat_level = value.length;
    },
    // 2.1提交事件函数
    submitadd (formRef) {
      this.$refs[formRef].validate(isPass => {
        if (isPass) {
          // 2.2 发请求，但在这里只有cat_name有值，cat_pid,cat_level还没有值!!!
          // 如果我没有选择节点，那创建出来的节点就是一级节点，cat_pid和cat_level固定死都为0
          // 如果选择了一级节点，那创建出阿来的节点就是二级节点，cat_pid为你选中的那个节点的id， cat_level固定死为1
          // 如果选择了二级节点，那创建出阿来的节点就是三级节点，cat_pid为你选中的那个两个节点数组的数组最后一项的id，cat_level固定死为2
          addCate(this.addForm).then(res => {
            console.log(res)
            this.$message.success('添加成功')
            this.initTable()
            // 将表单数据全部 初始化
            this.addForm.cat_name = ''
            this.addForm.cat_pid = 0
            this.addForm.cat_level = 0
            // 将选中的级联菜单的数组置空
            this.selectedOptions = []
            this.addDialogFormVisible = false
          })
        } else {
          this.$message.warning('请输入用户名称！')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
